<template>
  <div class="root" v-loading="loading">
    <div class="card">
      <op-table :tableData="tableData" show-summary></op-table>
    </div>
    <div class="card">
      <op-table :tableData="tableData" show-summary v-bind="tableConfig"></op-table>
    </div>
  </div>
</template>
<script setup>
import { tableConfig } from './tableConfig';
const props = defineProps({});
const emits = defineEmits([]);

const loading = ref(true);

onMounted(() => {
  setTimeout(() => {
    console.log(loading.value);
    loading.value = false;
  }, 2000);
});

const tableData = [
  {
    date: '2016-05-032016-05-032016-05-032016-05-032016-05-032016-05-032016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address:
      'No. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];

const init = () => {};
</script>
<style lang="scss" scoped>
.root {
  width: 100vw;
  height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;

  background-color: antiquewhite;
  .card {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    background: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    padding: 10px 15px;
    position: relative;
    box-sizing: border-box;
  }
}
</style>
